<template>
	<view class="user-center">
		<view class="header">
			<view class="avatar">
				<image :src="model.face" @click="handleShowFace" class="face" mode="aspectFill"></image>
			</view>
			<view class="user_info">
				<view class="">wordpress</view>
				<view class="desc u-line-2">纯净蓝天，和煦阳光，一缕清风绿意，我向往的生活。</view>
			</view>
		</view>
		<view class="nav-menu">
			<u-cell-group :border="false">
				<u-cell icon="server-man" size="large" :iconStyle="{color:'#096'}" isLink title="联系我们" @click="handleContact"></u-cell>
				<u-cell icon="info-circle" size="large" isLink title="免责声明" @click="handleNavBlame" v-if="false"></u-cell>
				<u-cell icon="chat" size="large" title="意见反馈" isLink></u-cell>
				<u-cell icon="coupon" size="large" title="关于我们" isLink></u-cell>
				<u-cell icon="lock-open" size="large" :iconStyle="{color:'#FF0000'}" title="注销登录" @click="handleLogin"></u-cell>
				<!-- #ifdef MP-WEIXIN -->
				<u-cell size="large" :border="false">
					<u-button icon="thumb-up" iconColor="#0000FF" slot="title" class="custom-style" text="推荐好友" open-type="share"></u-button>
				</u-cell>
				<!-- #endif -->
			</u-cell-group>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				model: {
					face: '/static/face.jpg'
				}
			}
		},
		created() {

		},
		methods: {
			handleLogin() {
				uni.showModal({
					title: '注销登录',
					content: '您确定要注销登录账号？',
					success: (res) => {
						if (res.cancel) {
							return
						}

						this.$u.route({
							url: '/pages/login/login'
						})
					}
				})
			},
			handleContact() {
				this.$u.route({
					url: '/pages/contact/contact'
				})
			},
			handleNavBlame() {
				this.$u.route({
					url: '/pages/blame/blame'
				})
			},
			handleShowFace() {
				uni.previewImage({
					urls: [this.model.face]
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-center {
		height: 100vh;
		background-color: #EEE;
	}

	.header {
		display: flex;
		flex-wrap: wrap;
		--wh: 200upx;
		width: 750upx;
		padding: 35upx 15upx;
		box-sizing: border-box;
		height: auto;
		background-color: #FFF;

		.avatar {
			overflow: hidden;
			width: 180upx;
			height: 180upx;
			text-align: center;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2px solid #EEE;
			box-shadow: 2px 5px 6px #b8b8b8;
		}

		.face {
			margin: auto;
			width: 180upx;
			height: 180upx;
		}

		.user_info {
			flex: 1;
			border: 0px solid #096;
			padding: 20upx 0px 0px 20upx;
			line-height: 40upx;
			overflow: hidden;

			.desc {
				padding: 10upx 0upx;
				width: 100%;
				overflow: hidden;
				font-size: 24upx;
				color: #808080;
			}
		}
	}

	.nav-menu {
		background-color: #FFF;
		margin-top: 10upx;
		padding: 10upx 0upx 50upx 10px;
		border: 1px solid #EEEE;
		border-radius: 15upx;
		box-shadow: 2px 2px 2px #EEE;
	}
</style>